<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="origin-when-cross-origin">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公车预约服务</title>
    <link href="../../css/common.css" rel="stylesheet">
    <link href="../../css/form.css" rel="stylesheet">
    <link href="../../plugin/layui-v2.9.0/css/layui.css" rel="stylesheet">
</head>

<body>
    <div class="form-content">
        <div class="top-header">
            <div class="content">
                <span class="server-name">
                    公车预约服务
                </span>
            </div>
        </div>
        <div class="form-box">
            <div class="content">
                <!-- 表单 -->
                <form class="layui-form">
                     <!-- 用车单位 -->
                     <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 用车单位
                        </label>
                        <div class="layui-input-block">
                            <select id="sp_csb_use_unit" lay-filter="unit-select-filter" lay-verify="required"></select>
                        </div>
                    </div>
                    <!-- 用车人姓名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 用车人姓名
                        </label>
                        <div class="layui-inline">
                            <input type="text" id="sp_csb_use_body_name" placeholder="请输入"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 联系电话 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span> 联系电话</label>
                        <div class="layui-inline" >
                            <input type="text" id="sp_csb_use_body_phone" lay-verify="required|phone" placeholder="请输入手机号"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                      <!-- 出发地 -->
                      <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 出发地
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="sp_csb_place_start" placeholder="请输入"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 目的地 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            <span class="required">*</span> 目的地
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="sp_csb_place_end" placeholder="请输入"
                                autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 用车人数 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span> 用车人数</label>
                        <div class="layui-inline"  style="width: 190px;">
                            <input type="number" id="sp_csb_ride_body_size" value="1"  autocomplete="off" class="layui-input" min="1" step="1" lay-affix="number">
                        </div>
                    </div>
                    <!-- 用车时间 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span>用车时间</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <div class="layui-input-prefix">
                                <i class="layui-icon layui-icon-date"></i>
                            </div>
                            <input type="text" class="layui-input" id="sp_csb_time_use" placeholder="请选择用车时间">
                        </div>
                    </div>
                    <!-- 车型选择 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="required">*</span> 车型选择</label>
                        <div class="layui-input-inline">
                            <select id="sp_csb_car_type" lay-filter="car_type-select-filter" lay-verify="required"></select>
                        </div>
                    </div>
                    
                    <!-- 行程 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            行程
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="sp_csb_way_line" placeholder="请输入行程" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <!-- 其他说明或要求 -->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">其他说明或要求</label>
                        <div class="layui-input-block">
                            <textarea id="sp_csb_order_remark" placeholder="请输入其他说明或要求" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block to-right">
                            <button  type="button" class="to_back layui-btn layui-btn-primary layui-border-purple">返回</button> 
                            <button  type="button" class="saveForm layui-btn">提交</button> 
                        </div>
                    </div> 
                </form>
            </div>
        </div>
    </div>
    <script src="../../plugin/layui-v2.9.0/layui.js"></script>
    <script src="../../plugin/jquery-2.0.0.min.js"></script>
    <script src="../../plugin/tool.js"></script>
    <script src="../../js/config.js"></script> 
    <script src="../../api.js"></script> 
    <script src="../../mock/data.js"></script> 
    <script> 
        $(function(){
            API.addClickTimes("公车预约");
        })
        var form,laydate,element;
        layui.use(function () {
            form = layui.form; 
            laydate = layui.laydate;
            element = layui.element;
            FORM.initPage();
        }); 
        var FORM = {
            pageDict:null, 
            initPage:function(){
                laydate.render({
                    elem: '#sp_csb_time_use',
                    type: 'datetime',
                    min: new Date().format("yyyy-MM-dd")
                });
                
                $(".to_back").click(function () {
                    window.location.href="../../index.html";
                });   
                $(".saveForm").click(function(){
                    FORM.saveForm();
                }); 
                var name =localStorage.getItem("os_u_full_name");
                var phone =localStorage.getItem("os_u_phone");
                if(name){
                    $("#sp_csb_use_body_name").val(name);
                }
                if(phone){
                    $("#sp_csb_use_body_phone").val(phone);
                } 
                API.getGcyyPageDict(function(json){
                    //console.log(json);
                    if (json.code != "0") { 
                        layer.alert(json.codemessage) ;
                        return;
                    }else{ 
                        FORM.pageDict = json;
                        FORM.setSelectData();
                    }	
                }); 
            },
            setSelectData:function(){
                var data = []
                if(FORM.pageDict.car_types){
                    data = FORM.pageDict.car_types.split(";");
                }
                var html='<option value="" selected>请选择车型</option>';
                data.forEach(item => {
                    html+='<option value="'+item+'">'+item+'</option>';
                }); 
                $("#sp_csb_car_type").html(html);
                layui.form.render($('#sp_csb_car_type'));

                if(FORM.pageDict.sp_csb_use_units){
                    data = FORM.pageDict.sp_csb_use_units.split(";");
                }else{
                    data =[];
                }
                html='<option value="" selected>请选择用车单位</option>';
                data.forEach(item => {
                    html+='<option value="'+item+'">'+item+'</option>';
                }); 
                $("#sp_csb_use_unit").html(html);
                layui.form.render($('#sp_csb_use_unit'));
            }, 
            saveForm:function(){
                var sp_csb_ride_body_size = $("#sp_csb_ride_body_size").val();//乘车人数
                var has_error = false;
                //乘车人数不能为0，进行检查
                if(sp_csb_ride_body_size==""||sp_csb_ride_body_size=="0"||sp_csb_ride_body_size==0){
                    layer.tips("乘车人数请再次核实！",$("#sp_csb_ride_body_size"),{tipsMore: true,tips:[1, 'red']}); 
                    has_error = true;
                }
                //必填项检查
                var mast_list = ["sp_csb_time_use","sp_csb_place_start","sp_csb_place_end","sp_csb_ride_body_size","sp_csb_use_body_name","sp_csb_use_body_phone"];
                for(var i = 0 ;i<mast_list.length;i++){
                    if( $("#"+mast_list[i]).val()=="" ){
                        layer.tips("不能为空！",$("#"+mast_list[i]),{tipsMore: true,tips:[1, 'red']});
                        has_error = true;
                    }
                }
                var mast_list = ["sp_csb_use_unit","sp_csb_car_type"];
                for(var i = 0 ;i<mast_list.length;i++){
                    if( $("#"+mast_list[i]).val()=="" ){
                        layer.tips("不能为空！",$("#"+mast_list[i]).parent("div").find("input"),{tipsMore: true,tips:[1, 'red']});
                        has_error = true;
                    }
                }
                if(has_error){
                    layer.msg("请填写完毕后提交！")
                    return;
                }
                var datas_p = { 
                    sp_csb_ride_body_size,
                    sp_csb_use_unit : $("#sp_csb_use_unit").val(),//用车单位
                    sp_csb_time_use : $("#sp_csb_time_use").val(),//用车时间    	
                    sp_csb_place_start : $("#sp_csb_place_start").val(),//乘车地点
                    sp_csb_place_end : $("#sp_csb_place_end").val(),//目的地
                    sp_csb_way_line : $("#sp_csb_way_line").val(),//运行路线要求
                    sp_csb_car_type : $("#sp_csb_car_type").val(),//预约车型（小车，大巴车，中巴车）
                    sp_csb_use_body_name : $("#sp_csb_use_body_name").val(),//用车人
                    sp_csb_use_body_phone : $("#sp_csb_use_body_phone").val(),//用车人手机 
                    sp_csb_order_remark : $("#sp_csb_order_remark").val(),//约车备注
				};
                //console.log(datas_p);
                // return;
        	    layer.load();
                API.submitGcyy(datas_p,function(json){
                    if (json.code != "0") {
                        layer.close(layer.index);   
                        layer.alert(json.codemessage) ;
                    }else{ 
                        layer.msg(json.codemessage);
                        setTimeout(function(){
                            window.location.href="./list.html";
                        },1000);
                    }	
                })

            },
           
        } 
    </script>
</body>

</html>